【CSS】スタイルの優先度

CSSのスタイルの優先度について解説します。

スタイルの優先度

同一要素においてプロパティが重複した場合、優先度の高いモノが適用されます。

優先度は『インライン > セレクター > 読み込み』の項目順で、各項目内においても優先度の強弱があります。

また、強制的に優先することを意味する『!importantフラグ』という特殊フラグがあります。

インライン

インラインはHTML要素のstyle属性を利用したスタイルです。

このスタイルのプロパティは優先度が最も高くなります。

次のサンプルではstyle要素とインラインでcolorプロパティを設定していますが、プレビューからインラインの値が適用されたことが分かります。

<style>
#title {
    color: blue;
}
</style>

<h1 id="title" class="heading" style="color: red;">CSS : Cascading Style Sheets</h1>

セレクター

スタイル要素やCSSファイル（スタイルシート）のスタイルです。

このスタイルの中で、同一要素に対するプロパティが重複した場合、詳細度が強いセレクターが優先されます。

詳細度の強弱は結合などにより複雑に評価されますが、大まかに『id属性 > クラス属性 / その他の属性 / 擬似クラス > 要素の種類』と覚えておけば問題ありません。

次のサンプルではid属性のセレクターの値が適用されたことがプレビューから確認できます。

<style>
#title {
    color: blue;
}
.heading {
    color: green;
}
h1 {
    color: yellow;
}
</style>

<h1 id="title" class="heading">CSS : Cascading Style Sheets</h1>

読み込み

上記、インラインやセレクターにおける優先度の評価において、優先度の優劣が決まらない場合、後に読み込まれたスタイルが適用されます。

次のサンプルでは、後に読み込まれる方の値が適用されたことがプレビューから確認できます。

<style>
.heading {
    color: yellow;
}
.heading {
    color: green;
}
</style>


<h1 class="heading" lang="ja">CSS : Cascading Style Sheets</h1>

!important

!importantは強制的にプロパティを適用するフラグです。

このフラグを付与したスタイルは優先度を無視して強制的に適用されます。

ソースコードの構造や可読性、動作などを複雑にするため極力使用しない方が良いですが、他者のソースコードで使われている可能性があるためご紹介します。

基本構文

セレクター {
    プロパティ名: プロパティ値 !important;
}

強制的に適用するプロパティの値の後にスペースで区切って!importantを記述します。

サンプル

<style>
h1 {
    color: purple !important;
}
</style>

<h1 id="title" class="heading" style="color: red;">CSS : Cascading Style Sheets</h1>

このサンプルからインラインよりもstyle要素のプロパティ（!important付き）が適用されたことが分かります。